<!doctype html>
<html>
  <head>
    <title>PGlite NOTIFY Example</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./utils.js"></script>
    <script type="importmap">
      {
        "imports": {
          "@electric-sql/pglite": "../dist/index.js"
        }
      }
    </script>
  </head>
  <body>
    <h1>PGlite <code>NOTIFY</code> Example</h1>
    <div class="script-plus-log">
      <script type="module">
        import { PGlite } from '@electric-sql/pglite'

        const pg = new PGlite()

        const unsub = await pg.listen('test', (payload) => {
          console.log('Received:', payload)
        })

        await new Promise((resolve) => setTimeout(resolve, 500))

        await pg.query("NOTIFY test, 'Hello, world!'")

        await new Promise((resolve) => setTimeout(resolve, 500))

        await pg.query("NOTIFY test, 'Hello, world again!'")

        await unsub()

        await pg.query("NOTIFY test, 'Will not be received!'")
      </script>
      <div id="log"></div>
    </div>
  </body>
</html>
